<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <!--template 允许有多个 根节点 -->
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home </RouterLink>
        <RouterLink to="/about">About </RouterLink>
        <RouterLink to="/first/setup">setup </RouterLink>
        <RouterLink to="/first/setup2">setup2 </RouterLink>
        <RouterLink to="/first/ref">ref </RouterLink>
        <RouterLink to="/first/computed">computed </RouterLink>
        <RouterLink to="/first/todolist">todolist </RouterLink>
        <RouterLink to="/second/life">life </RouterLink>
        <RouterLink to="/second/watch">watch </RouterLink>
        <RouterLink to="/second/ref">ref </RouterLink>
        <RouterLink to="/second/father">father </RouterLink>
        <RouterLink to="/third/father">thirdfather </RouterLink>
        <RouterLink to="/fourth/grandfather">grandfather </RouterLink>
        <RouterLink to="/fourth/tempdemo">tempdemo </RouterLink>
        <RouterLink to="/fourth/loadasynccomp">loadasynccomp </RouterLink>
        <RouterLink to="/fourth/mousemove">mousemove </RouterLink>
        <RouterLink to="/fourth/directive">directive </RouterLink>
        <RouterLink to="/fourth/i18n">i18n </RouterLink>
        <RouterLink to="/fourth/suspense">suspense </RouterLink>
        <RouterLink to="/fiveth/keepalive">keepalive </RouterLink>
        <RouterLink to="/fiveth/teleport">teleport </RouterLink>
        <RouterLink to="/fiveth/vuerouter">vuerouter </RouterLink>
        <RouterLink to="/fiveth/storeview">storeview </RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>

</style>
